<mat-toolbar>
  <span>ng2-charts</span>

  <button mat-icon-button routerLink="/">
    <mat-icon>home</mat-icon>
  </button>
  <mat-menu #appMenu="matMenu">
    <button mat-menu-item routerLink="/line">Line</button>
    <button mat-menu-item routerLink="/bar">Bar</button>
    <button mat-menu-item routerLink="/doughnut">Doughnut</button>
    <button mat-menu-item routerLink="/radar">Radar</button>
    <button mat-menu-item routerLink="/pie">Pie</button>
    <button mat-menu-item routerLink="/polar-area">Polar Area</button>
    <button mat-menu-item routerLink="/bubble">Bubble</button>
    <button mat-menu-item routerLink="/scatter">Scatter</button>
    <button mat-menu-item routerLink="/dynamic">Dynamic</button>
    <button mat-menu-item routerLink="/financial">Financial</button>
  </mat-menu>

  <button mat-button [matMenuTriggerFor]="appMenu">Examples</button>

  <div class="spacer"></div>

  <mat-slide-toggle
    color="primary"
    [(ngModel)]="isDarkTheme"
    (ngModelChange)="themeChanged()"
  >
    Dark Theme
  </mat-slide-toggle>
</mat-toolbar>

<main class="bd-pageheader">
  <div class="container">
    <div class="flex">
      <img
        src="http://www.chartjs.org/img/chartjs-logo.svg"
        alt="Chart.js logo"
        style="background: top center no-repeat; background-size: contain"
      />
      <div>
        <h1 style="font-family: Consolas, monospace">ng2-charts</h1>
        <p>
          Angular directives for
          <a href="http://www.chartjs.org/" style="color: white">Chart.js</a>
        </p>

        <iframe
          src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-charts&type=star&count=true"
        ></iframe>
        <iframe
          src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-charts&type=fork&count=true"
        ></iframe>
        &nbsp;
        <a target="_blank" href="https://ngx-home.slack.com/archives/C1QFKA5QE">
          <img
            src="https://a.slack-edge.com/66f9/img/icons/ios-256.png"
            width="25"
            height="25"
            alt="slack of ng2-charts"
          />
        </a>
        &nbsp;
        <a
          target="_blank"
          href="https://stackoverflow.com/questions/tagged/ng2-charts"
        >
          <img
            src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg"
            width="25"
            height="25"
            alt="ng2-charts on stackoverflow"
          />
        </a>
        &nbsp;
        <a target="_blank" href="https://github.com/valor-software/ng2-charts">
          <img
            src="https://github.githubassets.com/favicon.ico"
            width="25"
            height="25"
            alt="ng2-charts on github"
          />
        </a>
      </div>
    </div>
  </div>
</main>

<section class="container">
  <router-outlet></router-outlet>
</section>
<footer class="footer">
  <div class="container">
    <p class="text-center">
      <a
        mat-button
        href="https://github.com/valor-software/ng2-charts/graphs/contributors"
        >Contributors to ng2-charts</a
      >
    </p>
  </div>
</footer>
